`:top
`!Webpack`! is a `F33f`_`[free and open-source`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Free_and_open-source_software]`_`f module bundler for `F33f`_`[JavaScript`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=JavaScript_library]`_`f.`:cite-ref-5[`F5bf`_`[5`#cite-note-5]`_`f]`:cite-ref-6[`F5bf`_`[6`#cite-note-6]`_`f]`:cite-ref-7[`F5bf`_`[7`#cite-note-7]`_`f]`:cite-ref-8[`F5bf`_`[8`#cite-note-8]`_`f] It is made primarily for JavaScript, but it can transform front-end assets such as HTML, CSS, and images if the corresponding loaders are included.`:cite-ref-9[`F5bf`_`[9`#cite-note-9]`_`f] Webpack takes modules with dependencies and generates static assets representing those modules.`:cite-ref-10[`F5bf`_`[10`#cite-note-10]`_`f]
Webpack takes the dependencies and generates a `F33f`_`[dependency graph`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Dependency_graph]`_`f allowing web developers to use a modular approach for their web application development purposes. It can be used from the command line or can be configured using a configuration file which is named `*webpack.config.js`*. This file defines rules, plugins, etc., for a project. (Webpack is highly extensible via rules which allow developers to write custom tasks that they want to perform when bundling files together.)
`F33f`_`[Node.js`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Node.js]`_`f is required to use Webpack.
Webpack provides `F33f`_`[code on demand`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Code_on_demand]`_`f using the moniker `*code splitting`*. Two similar techniques are supported by Webpack when it comes to dynamic code splitting. The first and recommended approach is to use the `*import()`* syntax that conforms to the `F33f`_`[ECMAScript`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=ECMAScript]`_`f proposal for dynamic imports. The legacy, Webpack-specific approach is to use `*require.ensure`*.`:cite-ref-11[`F5bf`_`[11`#cite-note-11]`_`f]
>>Contents
• `F0af`_`[Webpack development server`#webpack-development-server]`_`f
• `F0af`_`[See also`#see-also]`_`f
• `F0af`_`[References`#references]`_`f
• `F0af`_`[External links`#external-links]`_`f
-─
>>Webpack development server
Webpack also provides a built-in development server, `*webpack-dev-server`*, that can be used as an HTTP server for serving files while developing. It also provides the capability to use hot module replacement (HMR), which updates code on a webpage without requiring the developer to reload the page.
>>See also
• `F33f`_`[Browserify`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Browserify]`_`f
• `F33f`_`[Vite`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Vite_(software)]`_`f
• `F33f`_`[Grunt (software)`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Grunt_(software)]`_`f
• `F33f`_`[Gulp.js`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Gulp.js]`_`f
• `F33f`_`[JavaScript framework`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=JavaScript_framework]`_`f
>>References
`:cite-note-1`!1.`! "Release Date of Version 1.0.0". Retrieved 2020-12-31.
`:cite-note-wikidata-552811384074d50cff559a468f149cd1a8858e39-v20-2`!2.`! "Release 5.100.2". 15 July 2025. Retrieved 17 July 2025.
`:cite-note-3`!3.`! "LICENSE file on GitHub". Retrieved 2020-12-31.
`:cite-note-4`!4.`! "License field from webpack - npm". Retrieved 2020-12-31.
`:cite-note-5`!5.`! `F0af`_`[↑`#cite-ref-5]`_`f "Web Performance Optimization with webpack". Google Inc. Retrieved 16 Oct 2018.
`:cite-note-6`!6.`! `F0af`_`[↑`#cite-ref-6]`_`f "A Beginner's Guide to webpack 4 and Module Bundling". `F33f`_`[SitePoint`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=SitePoint]`_`f. Retrieved 16 Oct 2018.
`:cite-note-7`!7.`! `F0af`_`[↑`#cite-ref-7]`_`f "Webpack 4.0 Release Brings Simplified Configuration, WebAssembly Support, and Big Performance Boost". InfoQ. Retrieved 16 Oct 2018.
`:cite-note-8`!8.`! `F0af`_`[↑`#cite-ref-8]`_`f "High-performance webpack config for front-end delivery". `F33f`_`[Codementor`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Codementor]`_`f. Retrieved 16 Oct 2018.
`:cite-note-9`!9.`! `F0af`_`[↑`#cite-ref-9]`_`f "What is webpack". SurviveJS. Retrieved 16 Oct 2018.
`:cite-note-10`!10.`! `F0af`_`[↑`#cite-ref-10]`_`f "What is webpack". GitHub. Retrieved 25 Feb 2018.
`:cite-note-11`!11.`! `F0af`_`[↑`#cite-ref-11]`_`f "Dynamic imports". webpack. Retrieved 6 Jun 2022.
>>External links
• Official website
`c`F0af`_`[↑ Back to top`#top]`_`f`a